前の手順では、C1Chart コントロールをウィンドウに追加しました。この手順では、DataSeries オブジェクトとそのデータを追加します。

Visual Studio で XAML を使用してデータをグラフに追加するには、以下の作業を実行します。

1. 次の XAML コードを使用して、タグ内でChartTypeプロパティを Bar に設定します。

2. ChartType="Bar"

3. 次の XAML コードを使用して、Chart コントロールのデータを追加します。

   XAML

   コードのコピー

   <c1chart:C1Chart.Data> <c1chart:ChartData> <c1chart:ChartData.ItemNames> <x:Array Type="{x:Type System:String}"> <System:String>ハンドミキサー</System:String> <System:String>据え置き型ミキサー</System:String> <System:String>缶切り</System:String> <System:String>トースター</System:String> <System:String>ミキサー</System:String> <System:String>食品加工機</System:String> <System:String>緩速調理鍋</System:String> <System:String>電子レンジ</System:String> </x:Array> </c1chart:ChartData.ItemNames> <c1chart:DataSeries Values="43000 40000 20000 41000 15000 30000 13000 50000" AxisX="価格" AxisY="キッチン家電" /> </c1chart:ChartData> </c1chart:C1Chart.Data>

   この手順では、８つの X 値を含む DataSeries を１つ使用しています。各データ値の文字列名を表すために String 型の ItemNames を ChartData に追加しました。いくつかの項目名にスペースが含まれるため、ItemNames に文字列名の配列を使用しました。「手順 1：プロジェクトへの Chart for WPF の追加」の手順４で名前空間を宣言したため、System:String 名前空間を使用できました。新しいデータは、グラフで次のように表示されます。

   

   次の「手順 3：軸の書式設定」では、XAML コードを使用して軸をカスタマイズする方法を学びます。

Blend で［プロパティ］ウィンドウを使用してデータをグラフに追加するには、次の作業を実行します。

1. ウィンドウで C1Chart コントロールを選択してアクティブにし、［プロパティ］ウィンドウの「外観」タブに移動して、ChartType プロパティを「Bar」に設定します。
2. ［プロパティ］ウィンドウで「その他」タブに移動します。

3. 「その他」タブで、Data（ChartData）を見つけて〈新規作成〉ボタンをクリックします。次のように、ChartData オブジェクトが XAML コードに追加されます。

   XAML	コードのコピー
   <c1chart:C1Chart ChartType="Bar" Margin="108,74,55,66"> <c1chart:C1Chart.Data> <c1chart:ChartData/> </c1chart:C1Chart.Data> <c1chart:C1ChartLegend DockPanel.Dock="Right"/> </c1chart:C1Chart>

   ダミーデータが削除され、まだデータが追加されていないため、C1Chart コントロールの表示は空になります。

4. C1Chart の［プロパティ］ウィンドウで Data（ChartData）の横にある矢印をクリックして、ChartData プロパティを拡張します。Children（コレクション）プロパティの横にある〈...〉ボタンをクリックします。［DataSeriesコレクションエディター：Children］ダイアログボックスが表示されます。

5. 〈別のアイテムを追加〉ボタンをクリックして、いずれかの型のデータ系列をDataSeriesCollectionに追加します。［オブジェクトの選択］ダイアログボックスが表示されます。

   

   ［オブジェクトの選択］ダイアログボックスでは、作成するグラフのタイプに応じて、グラフオブジェクトの BubbleSeries、DataSeries、HighLowOpenCloseSeries、HighLowSeries、XYDataSeries、XYZDataSeries から１つを選択できます。横棒グラフを作成するには、DataSeries を使用します。DataSeries オブジェクトを選択したら、それは DataSeriesCollection に追加されます。複数の系列を追加するには、〈別のアイテムを追加〉ボタンをクリックできます。

6. ［オブジェクトの選択］ダイアログボックスからDataSeriesを選択して、〈OK〉をクリックします。

   [0] DataSeries オブジェクトが［アイテム］パネルに追加されます。

7. 次に各製品の価格を表す値を追加します。プルパティ ウインドウでValue を見つけて、43000 40000 20000 41000 15000 30000 13000 50000 を入力します。終了したら〈OK〉をクリックして、［DataSeries コレクションエディター： Children］ダイアログボックスを閉じます。

   XAML	コードのコピー
   <c1chart:C1Chart.Data> <c1chart:ChartData> <c1chart:DataSeries Values="43000 40000 20000 41000 15000 30000 13000 50000"/> </c1chart:ChartData> </c1chart:C1Chart.Data>

   XAML コードは次のようになります。

8. プロジェクトを実行します。次のように、１つの系列を含む単純な横棒グラフが表示されます。
   

9. 「Data(ChartData)」ノードを拡張して、ItemNamesプロパティを見つけます。名前として、ハンドミキサー、据え置き型ミキサー、缶切り、トースター、ミキサー、食品加工機、緩速調理鍋、および 電子レンジを、この順番で入力します。［Enter］キーを押して戻り、必要に応じて XAML コードに変更を加えます。XAML コードは、次のようになるはずです。

   次の「手順 3：軸の書式設定」では、XAML コードを使用して軸をカスタマイズする方法を学びます。

   XAML

   コードのコピー

   <c1chart:ChartData.ItemNames> <x:Array Type="{x:Type System:String}"> <System:String>ハンドミキサー</System:String> <System:String>据え置き型ミキサー</System:String> <System:String>缶切り</System:String> <System:String>トースター</System:String> <System:String>ミキサー</System:String> <System:String>食品加工機</System:String> <System:String>緩速調理鍋</System:String> <System:String>電子レンジ</System:String> </x:Array> </c1chart:ChartData.ItemNames>

コードビハインドファイルでプログラムによりデータをグラフに追加するには、次の作業を実行します。

1. Visual Studio または Blend で新しい WPF プロジェクトを作成します。
2. C1Chart コントロールを Window1 に追加します。
3. Window1 を右クリックして［コードの表示］を選択し、エディタを開きます。
4. C1.WPF.C1Chart 名前空間の指示文を追加します。
   • WPF
   • Silverlight

   Visual Basic	コードのコピー
   Imports C1.WPF.C1Chart

                          
   

   C#	コードのコピー
   using C1.WPF.C1Chart;

   Visual Basic	コードのコピー
   Imports C1.Silverlight.Chart

   
   

   C#	コードのコピー
   using C1.Silverlight.Chart;

5. コンストラクタの Window1 クラスで次のコードを追加して、横棒グラフを作成します。

   • Visual Basic
   • C#

   コードのコピー

   ' 既存のデータをクリア c1Chart1.Data.Children.Clear() ' データを追加 Dim ProductNames As String() = {"ハンドミキサー", "据え置き型ミキサー", "缶切り", "トースター", "ミキサー", "食品加工機", _ "緩速調理鍋", "電子レンジ"} Dim PriceX As Integer() = {43000, 40000, 20000, 41000, 15000, 30000, _ 13000, 50000} ' 製品価格の系列を１つ作成 Dim ds1 As New DataSeries() ds1.Label = "価格" ' 価格データを設定 ds1.ValuesSource = PriceX ' 系列をグラフに追加 c1Chart1.Data.Children.Add(ds1) ' 項目名を追加 c1Chart1.Data.ItemNames = ProductNames ' グラフタイプを設定 c1Chart1.ChartType = ChartType.Bar

   コードのコピー

   // 既存のデータをクリア c1Chart1.Data.Children.Clear(); // データを追加 string[] ProductNames = {"ハンドミキサー", "据え置き型ミキサー", "缶切り", "トースター", "ミキサー", "食品加工機", "緩速調理鍋", "電子レンジ"}; int[] PriceX = { 43000, 40000, 20000, 41000, 15000, 30000, 13000, 50000 }; // 製品価格の系列を１つ作成 DataSeries ds1 = new DataSeries(); ds1.Label = "価格"; // 価格データを設定 ds1.ValuesSource = PriceX; // 系列をグラフに追加 c1Chart1.Data.Children.Add(ds1); // 項目名を追加 c1Chart1.Data.ItemNames = ProductNames; // グラフタイプを設定 c1Chart1.ChartType = ChartType.Bar;

   次の「手順 3：軸の書式設定」では、プログラムで軸をカスタマイズする方法を学びます。

プログラムを実行して、以下を確認します。

次のように、文字列値が Y 軸に表示されます。

次の一連の手順では、軸をカスタマイズします。

これで、Chart コントロールへのデータの追加は完了しました。次の手順では、軸を書式設定します。